import React from 'react'
import { View, Text } from 'react-native'
import flex from '../../../../configs/flex'
import { px2dp } from 'rn-xiaobu-utils'
import skin from '../../../../configs/skin'
import fontsize from '../../../../configs/fontsize'

export default class StationItem extends React.Component {
  _station () {
    if (this.props.stationNum === 0) {
      return (<Text style={skin.baseColorNoAcitve}>即将到站</Text>)
    } else if (this.props.stationNum === -99) {
      return (<Text style={skin.baseColorNoAcitve}>已经到站</Text>)
    } else {
      return (<View style={[flex.flexV, flex.flexVc, flex.flexHc, { width: px2dp(202) }]}>
        <Text style={[skin.baseColorNoAcitve, fontsize.fontsize54]}>{this.props.stationNum}<Text style={fontsize.fontsize28}>站</Text></Text>
        <Text style={fontsize.fontsize24}>约{this.props.stationDis}m</Text>
      </View>
      )
    }
  }
  render () {
    return (
      <View style={[flex.flexV, flex.flexVc, flex.flexHc, { width: px2dp(202) }]}>
        {this._station()}
      </View>
    )
  }
}

// const styles = StyleSheet.create({

// })